import 'zone.js';
import 'reflect-metadata';
import { Component, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ViserModule } from 'viser-ng';
const DataSet = require('@antv/data-set');

const DataView = DataSet.DataView;

const data = [
  {
    group: 'All Survey Responses',
    type: 'All Survey Responses',
    total: 565,
    'Strongly Agree': 50.1,
    Agree: 40.7,
    'No Opinion': 4.8,
    Disagree: 3.7,
    'Strongly Disagree': 0.7,
  },
  {
    group: 'Employment sector',
    type: 'Academic(nonstudent)',
    total: 253,
    'Strongly Agree': 64.0,
    Agree: 30.8,
    'No Opinion': 3.2,
    Disagree: 2.0,
    'Strongly Disagree': 0.0,
  },
  {
    group: 'Employment sector',
    type: 'Business and industry',
    total: 176,
    'Strongly Agree': 40.6,
    Agree: 50.0,
    'No Opinion': 2.8,
    Disagree: 6.3,
    'Strongly Disagree': 0.0,
  },
  {
    group: 'Employment sector',
    type: 'Federal, state, and local government',
    total: 71,
    'Strongly Agree': 38.0,
    Agree: 47.9,
    'No Opinion': 7.0,
    Disagree: 4.2,
    'Strongly Disagree': 2.8,
  },
  {
    group: 'Employment sector',
    type: 'Private consultant/self-employed',
    total: 28,
    'Strongly Agree': 39.3,
    Agree: 53.6,
    'No Opinion': 7.1,
    Disagree: 0.0,
    'Strongly Disagree': 0.0,
  },
  {
    group: 'Employment sector',
    type: 'Other',
    total: 34,
    'Strongly Agree': 29.4,
    Agree: 44.1,
    'No Opinion': 14.7,
    Disagree: 5.9,
    'Strongly Disagree': 5.9,
  },
  {
    group: 'Race',
    type: 'White',
    total: 400,
    'Strongly Agree': 50.0,
    Agree: 41.8,
    'No Opinion': 4.5,
    Disagree: 2.8,
    'Strongly Disagree': 1.0,
  },
  {
    group: 'Race',
    type: 'Asian',
    total: 122,
    'Strongly Agree': 53.3,
    Agree: 40.2,
    'No Opinion': 3.3,
    Disagree: 3.3,
    'Strongly Disagree': 0.0,
  },
  {
    group: 'Race',
    type: 'Black or African American',
    total: 10,
    'Strongly Agree': 40.0,
    Agree: 30.0,
    'No Opinion': 20.0,
    Disagree: 10.0,
    'Strongly Disagree': 0.0,
  },
  {
    group: 'Race',
    type: 'Other',
    total: 17,
    'Strongly Agree': 47.1,
    Agree: 35.3,
    'No Opinion': 5.9,
    Disagree: 11.8,
    'Strongly Disagree': 0.7,
  },
  {
    group: 'Education',
    type: "Associate's and Bachelor's",
    total: 175,
    'Strongly Agree': 37.1,
    Agree: 49.1,
    'No Opinion': 5.7,
    Disagree: 6.9,
    'Strongly Disagree': 1.1,
  },
  {
    group: 'Education',
    type: "Master's and Above",
    total: 388,
    'Strongly Agree': 55.9,
    Agree: 36.9,
    'No Opinion': 4.4,
    Disagree: 2.3,
    'Strongly Disagree': 0.5,
  },
  {
    group: 'Gender',
    type: 'Male',
    total: 356,
    'Strongly Agree': 50.6,
    Agree: 41,
    'No Opinion': 4.2,
    Disagree: 3.4,
    'Strongly Disagree': 0.8,
  },
  {
    group: 'Gender',
    type: 'Female',
    total: 200,
    'Strongly Agree': 51.0,
    Agree: 39.0,
    'No Opinion': 6.0,
    Disagree: 3.5,
    'Strongly Disagree': 0.5,
  },
];

const dv = new DataView();
dv.source(data)
  .transform({
    type: 'map',
    callback: function callback(row) {
      row['Strongly Disagree'] *= -1;
      row['Disagree'] *= -1;
      return row;
    },
  })
  .transform({
    type: 'fold',
    fields: [
      'Disagree',
      'Strongly Disagree',
      'No Opinion',
      'Agree',
      'Strongly Agree',
    ],
    key: 'opinion',
    value: 'value',
    retains: ['group', 'type'],
  });

const colorMap = {
  'Strongly Agree': '#3561A7',
  Agree: '#80B2D3',
  'No Opinion': '#D9F0F6',
  Disagree: '#EC7743',
  'Strongly Disagree': '#CB2920',
};

@Component({
  selector: '#mount',
  template: `
    <div>
      <v-chart [forceFit]="forceFit" [height]="height" [data]="data" padding="auto">
        <v-tooltip></v-tooltip>
        <v-legend dataKey="fold"></v-legend>
        <v-coord type="rect" direction="LB"></v-coord>
        <v-axis dataKey="type" [label]="label1" [title]="nullVal"></v-axis>
        <v-axis dataKey="value" position="right" [title]="nullVal" [tickLine]="nullVal" [label]="label2"></v-axis>
        <v-stack-bar position="type*value" [color]="color"></v-stack-bar>
      </v-chart>
    </div>
  `,
})
class AppComponent {
  forceFit: boolean = true;
  height: number = 500;
  data: any = dv;
  label1: any = { offset: 10 };
  nullVal: null = null;
  label2: any = { formatter: val => val + '%' };
  color: any = ['opinion', opinion => colorMap[opinion]];
}

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ViserModule],
  providers: [],
  bootstrap: [AppComponent],
})
export default class AppModule {}
